// 创建Vuex中核心的store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 准备State，用于存储数据
const state = {
    // 默认字体颜色
    color: '#666',
    // 默认菜单主题颜色
    theme: {
        backgroundColor: '#545c64',// 默认主题背景颜色
        textColor: '#fff',// 默认文本颜色
        activeTextColor: '#ffd04b',// 激活时的文本颜色
    },
    // 授权信息
    token: ''
}

// 准备Actions，响应组件中的动作（如果没有任何判断逻辑，不必使用它，直接使用mutations即可）
// 直接使用actions中的方法，必须使用dispatch(...)
const actions = {
    /**
     * 设置颜色
     * 在组件中的使用案例：this.$store.dispatch('setColor','#ccc')
     * @param {context} context 
     * @param {String} colorValue 
     */
    setColor(context, colorValue) {
        context.commit('SetColor', colorValue)
    },

    /**
     * 切换主题颜色
     * @param {context} context 
     * @param {Object} themeObj 
     */
    changeThemeColor(context, themeObj) {
        context.commit('ChangeThemeColor', themeObj)
    }
}

// 准备Mutations，用于操作数据（state）
// 直接使用mutations中的方法，必须使用commit(...)
const mutations = {
    /**
     * 设置主题颜色
     * 在组件中的使用案例：this.$store.commit('SetColor','#ccc')
     * @param {state} state 
     * @param {String} colorValue 
     */
    SetColor(state, colorValue) {
        state.themeColor = colorValue
    },
    /**
     * 切换主题颜色
     * @param {state} state 
     * @param {Object} themeObj 
     */
    ChangeThemeColor(state, themeObj) {
        state.theme = themeObj
    },

    /**
     * 改变authorized
     * @param {*} state 
     * @param {Boolean} logic 
     */
    Authorize(state, logic) {
        state.authorized = logic
    }
}

// 创建并暴露Vuex中的store
const store = new Vuex.Store({
    actions,
    mutations,
    state
})
export default store